<template>
  <div id="solar" ref="solar"></div>
</template>

<script lang="ts" setup>
import * as THREE from 'three'
import { ref, onMounted } from 'vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { cloudFun, createRingPlant, circle, createGeom, createSun } from '@/utils/tools'
import { SunConfig, MercuryConfig, HesperusConfig, EarthConfig, MarsConfig, JupiterConfig, SaturnConfig, UranusConfig, NeptuneConfig } from '@/utils/star'

// 创建场景对象
const scene = new THREE.Scene()
const cloud = cloudFun()
scene.add(cloud.points)
const planetGroup = new THREE.Group()
scene.add(planetGroup)

const PlanetFun = async (config:any) => {
  const Planet:any = createGeom(config.R, config.name)
  Planet.revolutionR = config.revolutionR
  Planet.angle = 2 * Math.PI * Math.random()
  Planet.position.set(config.revolutionR * Math.sin(2 * Math.PI), 0, config.revolutionR * Math.cos(2 * Math.PI))
  planetGroup.add(Planet)
  const line = circle(config.revolutionR)
  scene.add(line)
}
const PlanetRingFun = (config:any) => {
  const Planet:any = createRingPlant(config.R, config.name, config.ring.r, config.ring.R, config.ring.name)
  Planet.revolutionR = config.revolutionR
  Planet.angle = 2 * Math.PI * Math.random()
  Planet.position.set(config.revolutionR * Math.sin(2 * Math.PI), 0, config.revolutionR * Math.cos(2 * Math.PI))
  planetGroup.add(Planet)
  const line = circle(config.revolutionR)
  scene.add(line)
}

// 相机设置
const width = window.innerWidth
const height = window.innerHeight
const k = width / height
const s = 300
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 5000)
scene.add(camera)
camera.position.set(651, 613, 525)
camera.lookAt(scene.position)

// 光源设置
const point = new THREE.PointLight(0xffffff, 1)
point.position.set(0, 0, 0)
scene.add(point)

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
renderer.setClearColor(0x101010, 1)
const solar = ref(null)
onMounted(() => {
  (solar.value as any).appendChild(renderer.domElement)
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)
  const sun = createSun(SunConfig.R)
  scene.add(sun)
  PlanetFun(MercuryConfig)
  PlanetFun(HesperusConfig)
  PlanetFun(EarthConfig)
  PlanetFun(MarsConfig)
  PlanetFun(JupiterConfig)
  PlanetRingFun(SaturnConfig)
  PlanetRingFun(UranusConfig)
  PlanetFun(NeptuneConfig)
  const animate = () => {
    renderer.render(scene, camera)
    cloud.geometry.rotateX(0.0001)
    cloud.geometry.rotateY(0.0001)
    cloud.geometry.rotateZ(0.0001)
    sun.rotation.y += 0.01
    planetGroup.children.forEach((item:any) => {
      item.rotation.y += 0.01
      item.angle += 0.005 / item.revolutionR * 400
      item.position.set(item.revolutionR * Math.sin(item.angle), 0, item.revolutionR * Math.cos(item.angle))
    })
    requestAnimationFrame(animate)
  }
  animate()
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.update()
  controls.enableZoom = false
})
</script>

<style lang="scss">
   body {
      margin: 0;
      overflow: hidden;
    }
    #solar {
      margin: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
</style>
